<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="活动标题" prop="activeTitle">
            <el-input
              v-model.trim="formData.activeTitle"
              :disabled="disabled"
              placeholder="请输入活动标题"
              :maxlength="50"
              show-word-limit
              clearable
              prefix-icon="el-icon-activeTitle"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动状态" prop="activeStuta">
            <el-select
              v-model="formData.activeStuta"
              :disabled="disabled"
              placeholder="请选择活动状态"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in activeStutaOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动门店/部门" prop="activityStore">
            <el-select
              v-model="formData.activityStore"
              :disabled="disabled"
              placeholder="请选择活动门店/部门"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in activityStoreOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="活动数据" name="active">
              <el-row :gutter="15">
                <el-col :span="4">
                  <p>提成员工总数</p>
                  <p>100</p>
                </el-col>
                <el-col :span="4">
                  <p>总售出金额</p>
                  <p>150/元</p>
                </el-col>
                <el-col :span="4">
                  <p>提成总金额</p>
                  <p>50/元</p>
                </el-col>
                <el-col :span="24">
                  <el-form
                    :model="queryParams"
                    :inline="true"
                    label-width="0px"
                  >
                    <el-form-item>
                      <el-input
                        v-model="queryParams.schemeName"
                        style="width: 300px"
                        placeholder="请输入员工名称"
                        clearable
                        size="small"
                        @keyup.enter.native="getList"
                      />
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="getList"
                        >查询</el-button
                      >
                      <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="reset"
                        >重置</el-button
                      >
                    </el-form-item>
                  </el-form>
                  <el-table v-loading="purchase.loading" :data="purchase.list">
                    <el-table-column
                      min-width="140"
                      label="员工名称"
                      align="center"
                      prop="activeTitle"
                    />
                    <el-table-column
                      min-width="80"
                      label="所属部门/门店"
                      align="center"
                      prop="activeStuts"
                    />
                    <el-table-column
                      min-width="140"
                      label="售出单数"
                      align="center"
                      prop="activeStore"
                      sortable
                    />
                    <el-table-column
                      min-width="140"
                      label="分享人数"
                      align="center"
                      prop="activeStartTime"
                      sortable
                    />
                    <el-table-column
                      min-width="140"
                      label="浏览人数"
                      align="center"
                      prop="activeEndTime"
                      sortable
                    />
                    <el-table-column
                      min-width="140"
                      label="购买人数"
                      align="center"
                      prop="seckillPrice"
                      sortable
                    />
                    <el-table-column
                      min-width="140"
                      label="售出总金额/元"
                      align="center"
                      prop="outNum"
                      sortable
                    />
                    <el-table-column
                      min-width="140"
                      label="提成总金额/元"
                      align="center"
                      prop="inventoryNum"
                      sortable
                    />
                  </el-table>
                  <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
      activeName: 'active',
      userName: 'purchaseName',
      activeStutaOption: [
        {
          label: '进行中',
          value: 0,
        },
        {
          label: '其他',
          value: 1,
        },
      ],
      activityStoreOption: [
        {
          label: '默认门店',
          value: 0,
        },
        {
          label: '门店1',
          value: 1,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schemeName: null,
      },
      total: 1,
      purchase: {
        list: [],
        loading: false,
      },

      formData: {
        activeTitle: null,
        activeStuta: 0,
        activityStore: 0,
      },
    }
  },
  created() {
    this.handleActiveInit()
    // this.getList()
  },
  mounted() {},
  methods: {
    handleActiveInit() {
      console.log(this.$route.params.id)
    },
    /** 查询租户管理列表 */
    getList() {
      this.loading = true
      getSeckillList(this.queryParams).then((response) => {
        this.purchase.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        schemeName: null,
      }
      // this.getList()
    },
  },
}
</script>
